'use strict';

import React from 'react';

import {HttpService, Toast} from '../utils'

import phone from '../img/login/phone.png'
import pwd from '../img/login/pwd.png'
import user from '../img/login/user.png'
import code_ from '../img/login/code.png'

import {R_header} from './common/index'

class ForgetPwd extends React.Component {

    static contextTypes = {
        router: React.PropTypes.object.isRequired
    };

    constructor() {
        super();
        this.state = {
            disabled: false,
            text: '获取验证码',
            timer: 60,
            val: '',
            code: ''
        };

        this.countdown = []
    }

    changeValue(e) {
        this.check_phone(e.target.value);
    }

    changeCode(e) {

        this.setState({code: e.target.value});

    }

    async forgetPassword(val, code) {
        const pwd = this.refs.pwd.value;
        if (pwd == '' || code == '') {
            Toast.toast('请填写完整信息');
            return;
        }
        if (!this.check_phone(val)) {
            return;
        }
        let fgtUrl = '/app/user/forgotPassWord'
        if (localStorage.teacher == 1)
            fgtUrl = '/teacherapp/teacher/forgotPassWord'

        const result = await HttpService.save({
            url: fgtUrl,
            data: {
                account: val,
                smscode: code,
                password: pwd,
                weixinclient: true
            }
        });

        if (result.code == 10010 || result.code == 20004) {
            if (localStorage.teacher == 1) {
                const result = await HttpService.save({
                    url: '/teacherapp/teacher/findPassWord',
                    data: {
                        account: val,
                        password: pwd,
                        weixinclient: true
                    }
                });
                if (result.code != 20004) {
                    Toast.toast(result.msg)
                    return;
                }
            }
            Toast.toast('修改密码成功，重新登录！')
            clearInterval(this.countdown);
            this.context.router.push('/');
            return;
        }
        Toast.toast(result.msg)
    }

    check_phone(phone) {
        let patt = /^[1]\d{10}$/;
        let val = phone;
        this.setState({val: val});
        if (!val) {
            Toast.toast('手机号不能为空');
            return false;
        } else if (!patt.test(val)) {
            Toast.toast('手机号不正确，请重新输入');
            return false;
        }
        return true
    }

    async getCode(phone) {
        if (!this.check_phone(phone)) {
            return;
        }
        if (this.state.disabled) {
            return;
        }
        let smsto = 0;
        let smsUrl = '/app/user/generateSMSCode'
        if (localStorage.teacher == 1) {
            smsto = 1;
            smsUrl = '/teacherapp/teacher/generateSMSCode'
        } else {
            let code = await HttpService.save({
                url: "/app/user/checkTelephone",
                data: {
                    account: phone,
                    weixinclient: true
                }
            });
            if (code.code == 10002) {
                smsto = 1;
            } else {
                smsto = code.msg;
            }
        }
        if (smsto == 1) {
            const code = await HttpService.save({
                url: smsUrl,
                data: {
                    account: phone,
                    module: 'resetpassword',
                    weixinclient: true
                }
            });

            if (code.code == 10004 || code.code == 20006) {
                this.setState({disabled: true, text: '59S 后重新获取', timer: 59});

                this.countdown = setInterval(() => {
                    var tt = this.state.timer - 1;
                    if (tt <= 0) {
                        this.setState({disabled: false, text: '获取验证码', timer: 60});
                        clearInterval(this.countdown);
                        return;
                    }
                    this.setState({
                        disabled: true,
                        text: tt + 'S 后重新获取',
                        timer: tt
                    })
                }, 1000);
            } else {
                Toast.toast(code.msg, '3000')
            }

        } else {
            Toast.toast(smsto);
        }

    }

    render() {
        let {val, code} = this.state;
        return (

            <div className="forgetpwd">
                <R_header title="忘记密码" left="1"/>

                <div className="app-login app-padding-lr24 app-margin-t30">

                    <div className="card">

                        <div className="step border-bottom app-wh88">
                            <div className="app-wh-45 _app-margin-right24">
                                <img className="app-wh100-all-radius" src={phone}/>
                            </div>

                            <div className="s-flex1 app-666-font30">
                                <input className="app-333-font28 login-input" onBlur={this.changeValue.bind(this)} placeholder="手机号" type="number"/>
                            </div>

                            <div className="s-flex1 s-j-end app-666-font30">
                                <div className={"login-code step s" + this.state.disabled} onClick={this.getCode.bind(this, val)}>
                                    <div className="s-flex1 s-j-center">{this.state.text}</div>
                                </div>
                            </div>

                        </div>

                        <div className="step border-bottom app-wh88">
                            <div className="app-wh-45 app-margin-right24">
                                <img className="app-wh100-all-radius" src={code_}/>
                            </div>

                            <div className="s-flex1 app-666-font30">
                                <input className="app-333-font28 login-input" placeholder="输入短信验证码" type="number" onChange={this.changeCode.bind(this)}/>
                            </div>
                        </div>
                        <div className="step border-bottom app-wh88">
                            <div className="app-wh-45 app-margin-right24">
                                <img className="app-wh100-all-radius" src={pwd}/>
                            </div>

                            <div className="s-flex1 app-666-font30">
                                <input className="app-333-font28 login-input" ref="pwd" placeholder="6-20位字符密码，区分大小写" type="password"/>
                            </div>

                        </div>

                    </div>

                    <div className="step app-yellow-radius-check-button login-btn" onClick={this.forgetPassword.bind(this, val, code)}>
                        {/*<input className="s-center" type="submit" readOnly="readOnly" value="登录"/>*/}

                        <div className="s-center">确定</div>
                    </div>

                </div>
            </div>

        )
    }
}

export default ForgetPwd
